<script setup>
import {ref} from "vue";
// import { useRouter } from "vue-router";
//
// import frameStyle from "./LoginAndRegistration/frameStyle";
import animation from "@/components/animation/snowflakeAnimation.vue";
import {HomeFilled, MagicStick} from "@element-plus/icons-vue";

const marginFrame = ref("");
const disabled = ref(true);
const animationDisabled = ref(false);

//路由判断
// onMounted(() => {
//   let router = useRouter();
//   let { path } = router.currentRoute.value;
//   if (path == "/LoginAndRegistration/login") {
//     marginFrame.value = frameStyle.login;
//   } else {
//     marginFrame.value = frameStyle.enroll;
//   }
// });

function getmarginframe(frame) {
  if (marginFrame.value.width == frame.width || marginFrame.value.height == frame.height) {
    return;
  }

  marginFrame.value = frame;
  //设置动画
  //过度动画元素启动时触发
  disabled.value = false;

  setTimeout(() => {
    disabled.value = true;
  }, 1);
}

function onAnimationDisabled() {
  animationDisabled.value = !animationDisabled.value;
}
</script>

<template>
  <div class="body-bg">
    <animation :frame="animationDisabled"/>
    <div class="content">

      <div id="frame" :style="marginFrame">
        <div :class="{ shake: disabled }">
          <!--路由-->
          <RouterView v-if="disabled" @frameSize="getmarginframe"></RouterView>

          <!--动画按钮-->
          <el-icon size="30">
            <MagicStick
                @click="onAnimationDisabled"
                style="cursor: pointer; color: rgb(213, 200, 209)"
            />
          </el-icon>
          <!--返回主页-->
          <router-link to="/">
            <el-icon size="30">
              <HomeFilled style="color: rgb(213, 200, 209)"/>
            </el-icon>
          </router-link>
        </div>
      </div>
    </div>

  </div>

</template>


<style scoped>
* {
  padding: 0;
  margin: 0;
}

.body-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  overflow: hidden;
  background: linear-gradient(
      to left,
      rgb(238, 92, 92),
      rgb(154, 127, 250));
}

.shake {
  animation: Rotate 0.5s none;
  animation-timing-function: ease-in-out;
}

@keyframes Rotate {
  0% {
    transform: translateY(-50%);
    opacity: 0;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(0%);
  }
}

/* 整体边框背景属性*/
#frame {
  border-radius: 20px;
  /* 设置渐变 */
  background: linear-gradient(
      to right bottom,
      rgba(255, 255, 255, .6),
      rgba(255, 255, 255, .3),
      rgba(255, 255, 255, .2)
  );
  /* 重点：使元素背景模糊化 */
  backdrop-filter: blur(11px);
  /* 设置上高光和左高光，使其看起来更加逼真 */
  border-top: 1px solid rgba(255, 255, 255, .8);
  border-left: 1px solid rgba(255, 255, 255, .8);
}


.content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row; /*设置主轴方向是水平方向*/
  align-items: center; /*设置侧轴上，子元素的排列方式为居中对齐*/
}


</style>
